<template>
  <div>
    <div v-if="datas[0]" class="jumbotron p-3 p-md-5 text-white rounded bg-dark">
      <div class="col-md-6 px-0">
        <h1 class="display-4 font-italic">{{datas[0].title}}</h1>
        <p>{{$formatDateTime(datas[0].updateDate)}}</p>
        <p class="lead my-3">{{datas[0].abstract}}</p>
        <p class="lead mb-0">
          <a :href="`/article/${datas[0].id}`" target="_blank"
            class="text-white font-weight-bold">
            继续阅读...
          </a>
        </p>
      </div>
    </div>
    <div class="row mb-2">
      <div class="col-md-6" v-for="(item, index) in datas.slice(1, 3)" :key="index">
        <div class="card flex-md-row mb-4 box-shadow h-md-250">
          <div class="card-body d-flex flex-column align-items-start">
            <strong class="d-inline-block mb-2 text-primary">{{item.mark || '暂无分类'}}</strong>
            <h3 class="mb-0">
              <a class="text-dark" :href="`/article/${item.id}`" target="_blank">
                {{item.title}}
              </a>
            </h3>
            <div class="mb-1 text-muted">{{$formatDateTime(item.updateDate)}}</div>
            <p class="card-text mb-auto">{{item.abstract}}</p>
            <a :href="`/article/${item.id}`" target="_blank"
              class="font-weight-bold mt-auto">
              阅读全文
            </a>
          </div>
          <el-image class="card-img-right flex-auto d-none d-md-block" src="/sucai1.jpg" fit="cover">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from '@/api';

export default {
  name: 'good-article',
  title: '优质文章',
  created() {
    this.GoodArticles()
  },
  data() {
    return {
      // datas: []
      datas: new Array(2).fill({
        mark: 'Linux',
        title: 'Linux featured post',
        date: '2019-05-06',
        desc: `This is a wider card with supporting text below as a natural lead-in to additional content.`,
        imgSrc: '/sucai'
      })
    }
  },
  methods: {
    GoodArticles() {
      this.$get(api.articleLike).then(res => {
        this.datas = res.data.data
      })
    },
    checkArticle(row) {
      this.$router.push({name: 'article-id', params: {id: row.id}})
    }
  }
}
</script>